<template>
    <div>
        <Button type="primary"  @click="newsAdd" style="margin-bottom:20px" >添加</Button>
        <Button type="error"  @click="removes" style="margin-bottom:20px" >删除选中</Button>
         <Input v-model="filter.title" style="margin-bottom:20px">
        <Button slot="append" icon="ios-search" @click="searchData"></Button>
    </Input>
        <Modal
            v-model="modalAdd"
            title="添加"
            :loading="loading">
              <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="Title" prop="title">
            <Input v-model="formValidate.title" placeholder="Enter your title"></Input>
        </FormItem>
        <FormItem label="Desc" prop="desc">
            <Input v-model="formValidate.desc" placeholder="Enter your desc"></Input>
        </FormItem>
    </Form>
      <div slot="footer">
    <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </div>
        </Modal>


        <Table border ref="selection" :columns="columns" :data="data" height='410' @on-selection-change="onSelectionChangeHandler" @on-select-cancel="onSelectCancelHandler"></Table>
        <Page :total="filter.total" show-sizer :page-size-opts="filter.pagesize" :page-size="filter.limit" @on-change="onChangeHandler" @on-page-size-change="onPageSizeChangeHandler"></Page>

    </div>
</template>
<script>
    import { base } from '../common/base';
    import Bus from '../Bus';
    export default {
        mixins:[base],
        data () {
            return {
                 formValidate: {
                    title: '',
                    desc: ''
                },
                modules:'news',
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '新闻标题',
                        key: 'title',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('strong', params.row.title)
                            ]);
                        }
                    },
                    {
                        title: '新闻内容',
                        key: 'desc',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                              this.editData(params.row._id)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                ruleValidate: {
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ],
                    desc: [
                        { required: true, message: '请输入内容', trigger: 'blur' },
                    ]
                }
            }
        },
        methods:{
            newsAdd(){
                if(this.filter.cateId==null){
                       this.error(true);
                }else{
                   this.modalAdd=true;
                }
            },
             error (nodesc) {
                this.$Notice.error({
                    title: '请选择分类，否则无法添加新闻',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
               }
        },
        mounted(){
          Bus.$on('newsData',data => {
            this.filter.cateId = data[0]._id;
            var bodyString = JSON.stringify(this.filter);
                fetch(`http://localhost:3000/${this.modules}/list`,{
                    method:'post',
                    headers:{
                        'Content-Type':'application/json'
                    },
                    body:bodyString
                })
                .then(res => {
                    return res.json();
                })
                .then(data => {
                  this.filter.total = data.total;
                  this.data = data.rows;
                });
            })
        }
    }
</script>